<template>
  <div>
    <div class="box">
      <div class="card1">
        <h3>评价管理</h3>
        <el-divider></el-divider>
        <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" size="small">
          <el-form-item label="商品名称" prop="flowerName">
            <el-input v-model="formInline.flowerName" placeholder="请输入商品名称"></el-input>
          </el-form-item>

          <el-form-item label="用户名称" prop="accountName">
            <el-input v-model="formInline.accountName" placeholder="请输入用户名称"></el-input>
          </el-form-item>

          <el-form-item label="评价时间" prop="createTime">
            <el-date-picker
                v-model="formInline.createTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          
          <el-form-item label="评分级别" prop="rateScore">
            <el-select v-model="formInline.rateScore" placeholder="评分级别" style="width: 190px;">
              <el-option label="1星" value="1"></el-option>
              <el-option label="2星" value="2"></el-option>
              <el-option label="3星" value="3"></el-option>
              <el-option label="4星" value="4"></el-option>
              <el-option label="5星" value="5"></el-option>
            </el-select>
          </el-form-item>
          <p></p>
          <el-form-item label="评价状态" prop="isDelete">
            <el-select v-model="formInline.isDelete" placeholder="评价状态" style="width: 190px;">
              <el-option label="正常" value="0"></el-option>
              <el-option label="已删除" value="1"></el-option>
              <el-option label="被举报" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="selectAllFlowerComments">查询</el-button>
            <el-button type="info" @click="resetInfo">重置</el-button>
          </el-form-item>
        </el-form>
        <el-divider></el-divider>
        <!--订单表格-->
        <el-table :data="orderItemData" stripe border style="width: 100%">
          <el-table-column prop="contentId" label="评价编号"  width="100px" align="center"></el-table-column>
          <el-table-column prop="content" label="评价内容"  align="center"></el-table-column>
          <el-table-column prop="flowerName" label="商品名"  align="center"></el-table-column>
          <el-table-column prop="accountName" label="用户"  align="center"></el-table-column>
          <el-table-column prop="createTime" label="评价时间" align="center"></el-table-column>
          <el-table-column prop="commentImg" label="评价图片" align="center"></el-table-column>
          <el-table-column prop="rateScore" label="评分(星级)" align="center"></el-table-column>
          <el-table-column prop="contentId" label="评价情况" align="center">
            <template slot-scope="{row}">
          <span v-if="row.isDelete!=1">
            <span v-if="row.contentId !== 0">已评价<p/>
            <el-button type="text" @click="detailcomment(row.contentId,row.isDelete)">评价详情</el-button>
            </span>
            <span v-else>未评价</span>
          </span>
          <span v-else>已被删除</span>
              
            </template>
          </el-table-column>
          <el-table-column prop="isDelete" label="评价状态" align="center">
              <template slot-scope="{row}">
                <span v-if="row.isDelete === 0">正常</span>
                <span v-if="row.isDelete === 1">此评价已被删除</span>
                <span v-if="row.isDelete === 2">此评价已被举报</span>
              </template>
          </el-table-column>

          <el-table-column prop="remark" label="投诉原因" align="center">
            <template slot-scope="{row}">
              <span v-if="row.remark === ''">无</span>
              <span v-else>{{row.remark}}</span>
            </template>
          </el-table-column>
        </el-table>
        <el-divider></el-divider>

        <template>
          <el-dialog title="评价详情" :visible.sync="outerVisible" close-on-press-escape>
            <el-dialog width="30%" title="投诉此评价原因" :visible.sync="innerVisible" append-to-body close-on-press-escape>
              <el-input v-model="complaintCommentReason" placeholder="请填写投诉理由" maxlength="30" show-word-limit/>
              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="complaintcommment()">投诉评价</el-button>
                <el-button @click="innerVisible = false">退出</el-button>
              </div>
            </el-dialog>
            <!--评价详情-->
            <div>
              <el-descriptions class="margin-top" :column="1">
                <el-descriptions-item label="评价编号"><span v-text="commentList.contentId"></span></el-descriptions-item>
                <el-descriptions-item label="评价内容"><span v-text="commentList.content"></span></el-descriptions-item>
                <el-descriptions-item label="商品名"><span v-text="commentList.flowerName"></span></el-descriptions-item>
                <el-descriptions-item label="评价用户"><span v-text="commentList.accountName"></span></el-descriptions-item>
                <el-descriptions-item label="评价照片"><span v-text="commentList.commentImg"></span></el-descriptions-item>
                <el-descriptions-item label="评分">
                  <el-rate v-model="commentList.rateScore" disabled  text-color="#ff9900" ></el-rate>
                </el-descriptions-item>
              </el-descriptions>
            </div>

            <div slot="footer" class="dialog-footer">
              <span v-if="isDelete !== 2"><el-button type="warning" @click="innerVisible = true">投诉此评价</el-button></span>
              <span v-else><el-button type="danger" @click="cancelcomplaintcommment()">撤销此投诉</el-button></span>
              &nbsp;<span><el-button @click="outerVisible = false">退出</el-button></span>
            </div>
          </el-dialog>
        </template>
        
        <!--分页插件-->
        <el-pagination align="center"  style="margin-top:30px; "
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="pageNum"
                       :page-sizes="[5,10,15,20]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>

      </div>

    </div>
  </div>
</template>

<script>
export default {
  name: "CommentView",
  data() {
    return {
      pageNum:1,
      pageSize:5,
      total:5,

      formInline: {
        flowerName: '',
        accountName: '',
        createTime: [],
        rateScore: '',
        isDelete: '',
      },
      //评论表格
      orderItemData:[],
      //评论列表
      commentList: [],
      outerVisible: false,
      innerVisible: false,
      //投诉评价原因
      complaintCommentReason: '',
      isDelete:0,
    }
  },

  methods:{
    handleSizeChange(val) {
      this.pageSize =val;
      this.selectAllFlowerComments();
    },
    handleCurrentChange(val) {
      this.pageNum=val;
      this.selectAllFlowerComments();
    },
    //查询所有评价
    selectAllFlowerComments(){
      this.$axios.get("/flowercomment/selectAllFlowerComments",{
        params:{
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          flowerName:this.formInline.flowerName,
          accountName:this.formInline.accountName,
          startTime:this.formInline.createTime[0]?this.formInline.createTime[0].getTime():null,
          endTime:this.formInline.createTime[1]?this.formInline.createTime[1].getTime():null,
          rateScore:this.formInline.rateScore,
          isDelete:this.formInline.isDelete,
        }
      })
          .then(response => {
        if (response.data.code === 200) {
          this.orderItemData = response.data.data.list;
          this.pageNum = response.data.data.pageNum;
          this.pageSize = response.data.data.pageSize;
          this.total = response.data.data.total;
          this.$message({
            message: "评价管理查询成功",
            type:'success',
          })
        }
      });
    },

    resetInfo(){
      this.$refs.formInline.resetFields();
      this.selectAllFlowerComments();
    },
    
    //查看评价
    detailcomment(contentId,isDelete) {
      this.outerVisible = true;
      this.orderItemData.contentId = contentId;
      this.isDelete = isDelete;
      this.selectFlowerCommentByCommentId()
    },
    //评价详情
    selectFlowerCommentByCommentId(){
      this.$axios.get("/flowercomment/selectFlowerCommentByCommentId",
          {
            params: {
              'contentId': this.orderItemData.contentId,
            }
          }).then(response => {
        if (response.data.code === 200) {
          this.commentList = response.data.data;
        }
      });
    },
    //举报评价提示确认
    complaintcommment() {
      this.$confirm('确认投诉此评论吗？')
          .then(() => {
            this.$axios.get("/flowercomment/updatecomplaintFlowerCommentByCommentId",
                {
                  params: {
                    'contentId': this.orderItemData.contentId,
                    'remark': this.complaintCommentReason,
                    'isDelete': 2,
                  }
                }
            ).then(response => {
              console.log(response)
              this.$message({
                type: "success",
                message: "投诉成功",
              });
              this.outerVisible = false;
              this.innerVisible = false;
              this.complaintCommentReason = '';
              this.selectAllFlowerComments();
            })
          })
          .catch(()=>{})
    },
    //撤销举报评价
    cancelcomplaintcommment() {
      this.$confirm('确认撤销此评论吗？')
          .then(() => {
            this.$axios.get("/flowercomment/updatecomplaintFlowerCommentByCommentId",
                {
                  params: {
                    'contentId': this.orderItemData.contentId,
                    'remark': "",
                    'isDelete': 0,
                  }
                }
            ).then(response => {
              if (response.data.code===200){
                this.$message({
                  type: "success",
                  message: "已撤销举报",
                });
                this.outerVisible = false;
                this.innerVisible = false;
                this.complaintCommentReason = '';
                this.selectAllFlowerComments();
              }
            })
          }).catch(()=>{})
    },
  },
  mounted() {
    this.selectAllFlowerComments();
  }
}
</script>

<style scoped lang="less">
.box {
  border-radius: 4px;
  border: 1px solid white;
  background-color: white;
  margin: 30px 100px;
}

.box .card1 {
  margin: 20px 10px;
  text-align: left;
}
</style>